<template>
    <div>
        <h1>食谱列表</h1>
        <a href="Addfood">添加食谱</a>
        <br>
        <a href="Showfu">跳转到康复理疗列表</a>
        <br>
        食谱标题<input type="text" v-model="paeg.foodTile">
        类型名称<select v-model="paeg.typeName">
                    <option value="">请选择</option>
                    <option v-for="n in xia" :value="n.typeName">{{ n.typeName }}</option>
                 </select>
                 <input type="button" value="查" @click="Show" >
        <table class="table">
            <thead>
                <tr>
                    <td>食谱标题</td>
                    <td>图片</td>
                    <td>类型名称</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.foodTile}}</td>
                    <td><img  :src="'https://localhost:7235'+m.foodImg" alt="" style="width: 100px; height: 100px;"></td>
                    <td>{{m.typeName}}</td>
                    <td>{{ m.zhuangtai?"立即发布":"定时发布"}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';
onMounted(()=>{
    Show();
    la();
})
const xia=ref([{
    "typeId": 0,
    "typeName": ""
}])
const la=()=>{
    axios.get("https://localhost:7235/api/FoodType/XiaLa").then(res=>{
        xia.value=res.data;
    })
}
const paeg=ref({
    foodTile:"",
    typeName:""
})
const data=ref([{
    "foodId": 0,
    "foodTile": "string",
    "foodImg": "string",
    "typeName": "string",
    "zhuangtai": true
}])
const Show=()=>{
    axios.get("https://localhost:7235/api/Food/GetAll",{params:paeg.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>